import React from 'react'
import { Icon, DatePicker, Row, Col } from 'antd'
import '../../less/index.less'
import { withRouter } from 'react-router-dom'

class DateCell extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      value: this.props.value,
      editable: false
    }
  }

  check () {
    this.setState({editable: false})
    if (this.props.onChange) {
      this.props.onChange(this.state.value)
    }
  }

  edit () {
    this.setState({editable: true})
  }

  onChange (e, dateString) {
    this.setState({
      value: dateString
    })
  }

  render () {
    const {value, editable} = this.state
    const dateValue = value ? value.split(' ')[0] : ' '
    const width = this.props.isTask ? 125 : 120

    return (
      <Row>
        <Col span={22}>
          {editable
              ? <DatePicker onChange={this.onChange.bind(this)} style={{width: width}} />
              : <span>{dateValue}</span>
              }
        </Col>
        <Col span={1} offset={1}>
          {editable
                  ? <Icon
                    type='check'
                    onClick={this.check.bind(this)}
                  />
                  : <Icon type='calendar'
                    onClick={this.edit.bind(this)}
                  />
              }
        </Col>
      </Row>
    )
  }
}

export default withRouter(DateCell)
